<template>
  <div>
    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="订单号" prop="id"></el-table-column>
      <el-table-column label="班次" prop="airplane"> </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="deleteTicket(scope.$index, scope.row)"
            >退票</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <el-row>
      <el-col :span="2">
        <el-col :span="2"><div class="grid-content"></div></el-col>
      </el-col>
      <el-col :span="10" :offset="12">
        <div class="block">
          <el-pagination
            align="right"
            @current-change="handleCurrentChange"
            prev-text="上一页"
            next-text="下一页"
            :page-size="pageSize"
            :current-page="currentPage"
            layout=" prev, pager, next, jumper"
            :total="pageTotal"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageTotal: 0,
      currentPage: 1,
      pageSize: 13,
      tableData: [
        {
        },
      ],
      search: "",
    };
  },
  methods: {
    // 退票
    deleteTicket(index, row) {
      console.log(index);
      console.log(row);
      this.$confirm("确认退票?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var table = {
            id: row.id,
            airplane: row.airplane,
            user: JSON.parse(window.sessionStorage.getItem("userInfo")).name,
            power: false,
          };
          this.$http
            .post("/server/ticket/deleteTicket", table)
            .then((res) => {
              if (res.data.status) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });

                setTimeout(() => {
                  this.pageTotal--;
                  this.t = parseInt((this.pageTotal - 1) / this.pageSize) + 1;
                  this.currentPage =
                    this.currentPage <= this.t ? this.currentPage : this.t;
                  this.findAll(this.currentPage, this.pageSize);
                  this.currentPage = this.currentPage;
                }, 100);
              } else {
                this.$message.error(res.data.msg);
              }
            });
        })
    },
    // 修改当前页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.findAll(currentPage, this.pageSize);
    },
    // 分页获取用户机票列表
    findAll(currentPage, pageSize) {
      currentPage = currentPage ? currentPage : 1;
      pageSize = pageSize ? pageSize : this.pageSize;
      this.$http
        .get(
          "/server/ticket/findByPage?currentPage=" +
            currentPage +
            "&pageSize=" +
            pageSize +
            "&userName=" +
            JSON.parse(window.sessionStorage.getItem("userInfo")).name
        )
        .then((res) => {
          this.tableData = res.data.user;
          this.pageTotal = res.data.pageTotal;
        });
    },
  },
  created() {
    this.findAll();
  },
};
</script>
